{% from 'bootstrap5/pagination.html' import render_pager, render_pagination %}
{% from 'base/utils.html' import arg_url_for %}

{% for post in posts %} 
<section style="background-color: #eee;">
    <div class="container my-2 py-2">
      <div class="row d-flex justify-content-center">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <div class="d-flex flex-start align-items-center">
                <img class="rounded-circle shadow-1-strong me-3"
                  src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp" alt="avatar" width="60"
                  height="60" />
                <div>
                  <a  class="fw-bold text-primary mb-1" href="{{ url_for('.user', username=post.author.username) }}">
                    {{ post.author.username }}
                  </a>
                    <!-- <h6 class="fw-bold text-primary mb-1">{{ url_for('.user', username=post.author.username) }}</h6> -->
                  <p class="text-muted small mb-0">
                    {{moment(post.timestamp).format('LLL')}}
                    {{ moment(post.timestamp).fromNow() }}
                  </p>
                </div>
              </div>
  
              <p class="mt-3 mb-4 pb-2">
                {% if post.body_html %} 
                  {{ post.body_html | safe }} 
                {% else %} 
                  {{ post.body }} 
                {% endif %} 
              </p>
  
              <div class="small d-flex justify-content-start">
                <a href="#!" class="d-flex align-items-center me-3">
                  <i class="far fa-thumbs-up me-2"></i>
                  <p class="mb-0">Like</p>
                </a>
                <a href="#!" class="d-flex align-items-center me-3">
                  <i class="far fa-comment-dots me-2"></i>
                  <p class="mb-0">Comment</p>
                </a>
                <a href="#!" class="d-flex align-items-center me-3">
                  <i class="fas fa-share me-2"></i>
                  <p class="mb-0">Share</p>
                </a>
                <a href="{{ url_for('.post', id=post.id) }}" class="d-flex align-items-center me-3">
                  <i class="fas fa-share me-2"></i>
                  <p class="mb-0">链接</p>
                </a>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </section>
{% endfor %} 

{% if posts|length > 1 %}
{{ render_pagination(pagination) }}
<nav aria-label="...">
    <ul class="pagination pagination-circle">
      <li class="page-item">
        <a class="page-link">上一页</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>


      <li class="page-item">
        <a class="page-link" href="#">下一页</a>
      </li>
    </ul>
  </nav>

  {% if fragment != '' and not fragment.startswith('#') %}{% set fragment = '#' + fragment %}{% endif %}
    {% with url_args = {} %}
        {%- do url_args.update(request.view_args if not endpoint else {}),
       url_args.update(request.args if not endpoint else {}),
       url_args.update(args) -%}
        {% with endpoint = endpoint or request.endpoint %}
            <nav aria-label="Page navigation" class="d-flex justify-content-center">
                <ul class="pagination pagination-circle{% if size %} pagination-{{ size }}{% endif %}{% if align == 'center' %} justify-content-center{% elif align == 'right' %} justify-content-end{% endif %}">
                    {# prev and next are only show if a symbol has been passed. #}
                    {% if prev != None -%}
                        <li class="page-item{% if not pagination.has_prev %} disabled{% endif %}">
                            <a class="page-link" href="{{ arg_url_for(endpoint, url_args, page=pagination.prev_num) if pagination.has_prev else '#' }}{{ fragment }}">{{ prev }}</a>
                        </li>
                    {%- endif -%}

                    {%- for page in pagination.iter_pages() %}
                        {% if page %}
                            {% if page != pagination.page %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ arg_url_for(endpoint, url_args, page=page) }}{{ fragment }}">{{ page }}</a>
                                </li>
                            {% else %}
                                <li class="page-item active" aria-current="page">  
                                    <a class="page-link" href="">{{ page }}<span class="visually-hidden">(current)</span></a>
                                </li>
                            {% endif %}
                        {% elif ellipses != None %}
                            <li class="page-item disabled"><a class="page-link" href="#">{{ ellipses }}</a></li>
                        {% endif %}
                    {%- endfor %}

                    {% if next != None -%}
                        <li class="page-item{% if not pagination.has_next %} disabled{% endif %}">
                            <a class="page-link" href="{{ arg_url_for(endpoint, url_args, page=pagination.next_num) if pagination.has_next else '#' }}{{ fragment }}">{{ next }}</a>
                        </li>
                    {%- endif -%}
                </ul>
            </nav>
        {% endwith %}
    {% endwith %}
{% endif %}